<template>
  <div class="designer-wrap">
    <div class="designer-base-info">
      <div class="base-info-panel">
        <el-form>
          <el-form-item label="图标">
            <el-upload
              class="avatar-uploader"
              action="/upload/img"
              :http-request="picUpload"
              :show-file-list="false"
              :on-success="onSuccess"
              :on-error="onError"
            >
              <img
                v-if="baseSetting.imageUrl"
                :src="baseSetting.imageUrl"
                class="avatar"
              />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>

          <el-form-item label="名称">
            <el-input
              v-model="baseSetting.flowName"
              placeholder="请输入名称"
              :size="size"
            />
          </el-form-item>

          <el-form-item label="分组">
            <FlowSimpleSelect
              v-model="baseSetting.flowGroup"
              :datas="flowGroups"
              labelName="label"
              placeholder="请选择分组"
            />
          </el-form-item>

          <el-form-item label="说明">
            <el-input
              v-model="baseSetting.description"
              type="textarea"
              :size="size"
              :rows="4"
              placeholder="说明"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup name="BasicInfo">
import { ref, reactive, toRefs,  computed } from "vue";
import { useStore } from "vuex";
import { flowMixin } from "../../mixins/flowMixin";
import FlowSelect from "../../Component/FlowSelect.vue";
import FlowSimpleSelect from "../../Component/FlowSimpleSelect.vue";
import { uploadImg } from "../../../api/common.js";

const buttonName = ref("保存");
const formLayout = ref("vertical");
const flowName = ref("");
const bindForm = ref([]);
const flowGroups = reactive([
  { label: "人事", value: "1" },
  { label: "考勤", value: "2" },
  { label: "行政", value: "3" },
  { label: "财务", value: "4" },
  { label: "薪酬", value: "5" },
  { label: "资产", value: "6" },
]);

const forms = reactive([
  { label: "请假表单", value: "人事表单" },
  { label: "加班表单", value: "考勤表单" },
  { label: "调休表单", value: "调休表单" },
  { label: "补卡表单", value: "补卡表单" },
  { label: "出差表单", value: "出差表单" },
  { label: "销假表单", value: "销假表单" },
]);
const store = useStore();
const emit = defineEmits(["publish"]);
const props = defineProps({
  navable: {
    type: Boolean,
    default: true,
  },
  readable: {
    type: Boolean,
    default: false,
  },
});

const { navable, readable } = toRefs(props);

const onPublish = () => {
  emit("publish", flowName.value);
};

const baseSetting = computed(() => {
  return store.state.process.baseSetting;
});
const onSuccess = (response) => {
  console.log("response");
  // 处理后端返回的响应数据
};
const onError = (error) => {
  console.log("error");
  // 处理上传失败的逻辑
};

const picUpload = (f) => {
  console.log(f);
  const formData = new FormData();
  formData.append("file", f.file);
  uploadImg({file: f.file}).then((res) => {
    console.log(res);
    store.state.process.baseSetting.imageUrl = res.data;
  });
};
</script>

<style lang="scss" scoped>
.designer-wrap {
  width: 100%;
  height: 100%;
  background: #f8fafc;
  padding: 24px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.designer-base-info {
  width: 100%;
  max-width: 960px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.base-info-panel {
  padding: 48px;

  :deep(.el-form) {
    .el-form-item {
      margin-bottom: 32px;
      position: relative;

      &:last-child {
        margin-bottom: 0;
      }

      .el-form-item__label {
        display: block;
        margin-bottom: 8px;
        font-size: 15px;
        font-weight: 500;
        color: #1f2937;
        line-height: 1.5;
      }

      .el-form-item__content {
        width: 100%;
      }

      .el-input__wrapper {
        background: #f8fafc;
        border: 1px solid #e5e7eb;
        box-shadow: none !important;
        border-radius: 8px;
        padding: 8px 16px;
        transition: all 0.3s ease;

        &:hover {
          border-color: #409EFF;
          background: #f0f7ff;
        }

        &.is-focus {
          border-color: #409EFF;
          background: #fff;
          box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1) !important;
        }
      }

      .el-input__inner {
        height: 24px;
        line-height: 24px;
        font-size: 14px;
        color: #1f2937;

        &::placeholder {
          color: #9ca3af;
        }
      }

      .el-textarea__inner {
        background: #f8fafc;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 12px 16px;
        min-height: 120px;
        font-size: 14px;
        line-height: 1.6;
        color: #1f2937;
        transition: all 0.3s ease;

        &:hover {
          border-color: #409EFF;
          background: #f0f7ff;
        }

        &:focus {
          border-color: #409EFF;
          background: #fff;
          box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
        }

        &::placeholder {
          color: #9ca3af;
        }
      }
    }
  }
}

.avatar-uploader {
  width: 120px;
  height: 120px;
  border: 2px dashed #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  background: #f8fafc;
  position: relative;

  &:hover {
    border-color: #409EFF;
    background: #f0f7ff;

    .avatar-uploader-icon {
      color: #409EFF;
      transform: scale(1.1);
    }
  }

  .avatar {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .avatar-uploader-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    color: #9ca3af;
    transition: all 0.3s ease;

    &:hover {
      transform: translate(-50%, -50%) scale(1.1);
    }
  }

  :deep(.el-upload) {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

// 下拉选择器样式
:deep(.el-select) {
  width: 100%;

  .el-select__tags {
    margin: 3px 0;
  }

  .el-tag {
    background: #f0f7ff;
    border-color: #409EFF;
    color: #409EFF;
  }
}

// 滚动条样式
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: #dcdfe6;
  border-radius: 3px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

// 响应式处理
@media screen and (max-width: 768px) {
  .designer-wrap {
    padding: 16px;
  }

  .base-info-panel {
    padding: 24px;

    :deep(.el-form) {
      .el-form-item {
        margin-bottom: 24px;
      }
    }
  }

  .avatar-uploader {
    width: 100px;
    height: 100px;

    .avatar-uploader-icon {
      font-size: 24px;
    }
  }
}

// 添加入场动画
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.designer-base-info {
  animation: fadeInUp 0.4s ease-out;
}
</style>
